<template>
	<!-- 热搜索榜单 -->
	<div class="leftModule">
		<!-- 微博榜单 -->
		<div class="wbHot">
			<div class="wbName">微博热搜</div>
		</div>
		<!-- 百度热搜 -->
		<div class="bdHot">
			<div class="bdName">百度热搜</div>
		</div>
		<!-- CSDN热搜 -->
		<div class="csHot">
			<div class="csName">CSDN热搜</div>
		</div>
		<!-- 今日头条热搜 -->
		<div class="ttHot">
			<div class="ttName">今日头条热搜</div>
		</div>
		
		<!-- 实用小工具 -->
		<div class="smallTools">
			<div>实用小工具</div>
			<div class="tools" v-for="tools in sTools" :key="tools.id">
				<a :href="tools.src" class="toolsLink" target="_blank">
					<!-- <img :src="tools.img" class="toolImg"> -->
					{{tools.name}}
				</a>
			</div>
			
		</div>
		
	</div>
</template>

<script>
	// 小工具
	let sTools = [
		{
			id:"1",
			src:"https://colors.ichuantong.cn/",
			img:require("../assets/images/tools/chuantong.png"),
			name:"中国传统颜色手册",
		},
		{
			id:"2",
			src:"https://www.sioe.cn/yingyong/yanse-rgb-16/",
			img:require("../assets/images/tools/color.png"),
			name:"颜色转换工具",
		},
		{
			id:"3",
			src:"https://translate.google.cn/",
			img:require("../assets/images/tools/fanyi.png"),
			name:"Google翻译",
		},
		{
			id:"4",
			src:"https://github.com/dotnetcore/FastGithub/releases/tag/2.1.2",
			img:require("../assets/images/code/github.jpg"),
			name:"GitHub加速器",
		},
		{
			id:"5",
			src:"https://www.jq22.com/",
			img:require("../assets/images/code/github.jpg"),
			name:"jQuery插件",
		},
	];
	export default{
	    name:"HotList",
	    data(){
	        return {
				sTools,
	        }
	    },
	}
	import $ from 'jquery'
	$(function(){
		// 微博热搜
		$.ajax({
		    url:"https://www.coderutil.com/api/resou/v1/weibo.jsonp?size=10&&access-key=5e41ee7ba5820eaeda7a553874dbdef2&secret-key=6577e109b6b43a94feb59b31084b8929",
		    type: "GET",
		    dataType: "jsonp", 
		    jsonp: "callback",
			async: true,
		    // jsonpCallback: "callback",
		    success: function (data) {
				for(var i=0;i<data.length;i++){
					let wbhot;
					let $rank = data[i].rank;
					let $keyword = data[i].keyword;
					let $url = data[i].url;
					// console.info($rank,$keyword,$url)
					
					wbhot = '<div class="wbList" >'+
								'<div class="hotRank">'+
									'<span class="rank">'+
										$rank+
									'</span>'+
								'</div>'+
								'<a href="'+$url+'" target="_blank">'+
									'<div class="keyword">'+
										$keyword+
									'</div>'+
								'</a>'+
							'</div>'
					// console.info(wbhot);
					$(".wbHot").append(wbhot);
				}
		    }
		});
		// 百度热搜
		$.ajax({
		    url:"http://www.coderutil.com/api/resou/v1/baidu.jsonp?size=10&&access-key=5e41ee7ba5820eaeda7a553874dbdef2&secret-key=6577e109b6b43a94feb59b31084b8929",
		    type: "GET",
		    dataType: "jsonp", 
		    jsonp: "callback",
			async: true,
		    // jsonpCallback: "callback",
		    success: function (data) {
				// console.info(data)
		        // 开始你的数据渲染处理吧
				for(var i=0;i<data.length;i++){
					let bdhot;
					let $rank = data[i].rank;
					let $keyword = data[i].keyword;
					let $url = data[i].url;
					
					// console.info($rank,$keyword,$url)
					
					bdhot = '<div class="bdList" >'+
								'<div class="hotRank">'+
									'<span class="rank">'+
										$rank+
									'</span>'+
								'</div>'+
								'<a href="'+$url+'" target="_blank">'+
									'<div class="keyword">'+
										$keyword+
									'</div>'+
								'</a>'+
							'</div>'
					// console.info(bdhot);
					$(".bdHot").append(bdhot);
				}
		    }
		});
		// csdn热搜
		$.ajax({
		        url:"http://www.coderutil.com/api/resou/v1/csdn.jsonp?size=10&&access-key=5e41ee7ba5820eaeda7a553874dbdef2&secret-key=6577e109b6b43a94feb59b31084b8929",
		        type: "GET",
		        dataType: "jsonp", 
		        jsonp: "callback",
				async: true,
		        // jsonpCallback: "callback",
		        success: function (data) {
					// console.info(data)
		            // 开始你的数据渲染处理吧
					for(var i=0;i<data.length;i++){
						let cshot;
						let $rank = data[i].rank;
						let $keyword = data[i].keyword;
						let $url = data[i].url;
						
					// 	// console.info($rank,$keyword,$url)
						
						cshot = '<div class="csList" >'+
									'<div class="hotRank">'+
										'<span class="rank">'+
											$rank+
										'</span>'+
									'</div>'+
									'<a href="'+$url+'" target="_blank">'+
										'<div class="keyword">'+
											$keyword+
										'</div>'+
									'</a>'+
								'</div>'
						$(".csHot").append(cshot);
					}
		        }
		    });
		// 今日头条热搜
		$.ajax({
		    url:"http://www.coderutil.com/api/resou/v1/toutiao.jsonp?size=10&&access-key=5e41ee7ba5820eaeda7a553874dbdef2&secret-key=6577e109b6b43a94feb59b31084b8929",
		    type: "GET",
		    dataType: "jsonp", 
		    jsonp: "callback",
			async: true,
		    // jsonpCallback: "callback",
		    success: function (data) {
		        // 开始你的数据渲染处理吧
				for(var i=0;i<data.length;i++){
					let tthot;
					let $rank = data[i].rank;
					let $keyword = data[i].keyword;
					let $url = data[i].url;
					
				// 	// console.info($rank,$keyword,$url)
					
					tthot = '<div class="ttList" >'+
								'<div class="hotRank">'+
									'<span class="rank">'+
										$rank+
									'</span>'+
								'</div>'+
								'<a href="'+$url+'" target="_blank">'+
									'<div class="keyword">'+
										$keyword+
									'</div>'+
								'</a>'+
							'</div>'
					$(".ttHot").append(tthot);
				}
		    }
		});
	})
</script>

<style >
	/* 左边热搜榜 */
	.leftModule{
		position: relative;
		float: left;
		width: 310px;
	}
	/* 微博热搜 */
	.wbHot{
		position: relative;
		width: 295px;
		border-radius: 7px;
		box-shadow:6px 6px 10px #bdbdbd;
		margin-bottom: 30px;
		padding-bottom: 20px;
	}
	.wbName{
		color: #ffffff;
		font-size: 19px;
		font-weight: 600;
		background-color: #f45858;
		width: 280px;
		height: 50px;
		line-height: 50px;
		border-radius: 10px 10px 0 0;
		padding-left: 15px;
		margin-bottom: 10px;
	}
	.hotRank{
		float: left;
		margin-right: 10px;
	}
	.rank{
		padding: 2px 6px;
		background-color: #eaeaea;
		text-align: center;
		border-radius: 3px;
		font-size: 1px;
		line-height: 4px;
	}
	.wbList{
		overflow: hidden;
		height: 30px;
		line-height: 30px;
		padding: 4px 8px 2px 13px;
	}
	.wbList a{
		color: #000000;
		width: 100%;
	}
	.keyword{
		font-size: 14px;
		width: 100%;
		/* text-overflow: ellipsis;
		white-space: nowrap; */
		-webkit-line-clamp:1;
		height: 40px;
	}
	.keyword:hover{
		color: #737373;
	}
	
	/* 百度热搜 */
	.bdHot{
		position: relative;
		width: 295px;
		border-radius: 7px;
		box-shadow:6px 6px 10px #bdbdbd;
		margin-bottom: 30px;
		padding-bottom: 20px;
	}
	.bdName{
		color: #ffffff;
		font-size: 19px;
		font-weight: 600;
		background-color: #5358ef;
		width: 280px;
		height: 50px;
		line-height: 50px;
		border-radius: 10px 10px 0 0;
		padding-left: 15px;
		margin-bottom: 10px;
	}
	.bdList{
		overflow: hidden;
		height: 30px;
		line-height: 30px;;
		padding: 4px 15px 2px;
	}
	.bdList a{
		color: #000000;
		width: 100%;
	}
	/* CSDN热搜 */
	.csHot{
		position: relative;
		width: 295px;
		border-radius: 7px;
		box-shadow:6px 6px 10px #bdbdbd;
		margin-bottom: 30px;
		padding-bottom: 20px;
	}
	.csName{
		color: #ffffff;
		font-size: 19px;
		font-weight: 600;
		background-color: #fc5632;
		width: 280px;
		height: 50px;
		line-height: 50px;
		border-radius: 10px 10px 0 0;
		padding-left: 15px;
		margin-bottom: 10px;
	}
	.csList{
		overflow: hidden;
		height: 30px;
		line-height: 30px;
		padding: 4px 15px 2px;
	}
	.csList a{
		color: #000000;
		width: 100%;
	}
	
	/* CSDN热搜 */
	.ttHot{
		position: relative;
		width: 295px;
		border-radius: 7px;
		box-shadow:6px 6px 10px #bdbdbd;
		margin-bottom: 30px;
		padding-bottom: 20px;
	}
	.ttName{
		color: #ffffff;
		font-size: 19px;
		font-weight: 600;
		background-color: #f04142;
		width: 280px;
		height: 50px;
		line-height: 50px;
		border-radius: 10px 10px 0 0;
		padding-left: 15px;
		margin-bottom: 10px;
	}
	.ttList{
		overflow: hidden;
		height: 35px;
		line-height: 40px;
		padding: 4px 15px 2px;
	}
	.ttList a{
		color: #000000;
		width: 100%;
	}
	
	/* 实用工具 */
	.smallTools{
		float: left;
		position: relative;
		margin: 0 auto 40px;
		width: 250px;
		/* background-color: #65bc8e; */
		box-shadow:5px 5px 8px #c8c8c8;
		border-radius: 8px;
		padding: 12px 20px;
	}
	.tools{
		float: left;
		cursor: pointer;
		margin-right: 15px;
		background-color: #eff2fd;
		padding: 6px 9px;
		line-height: 15px;
		border-radius: 13px;
		margin-bottom: 10px;
		/* width: 130px; */
	}
	.toolsLink{
		color: #000000;
		font-size: 12px;
	}
	.toolImg{
		float: left;
		width: 17px;
		height: 17px;
		border-radius: 7px;
		margin-right: 3px;
	}
</style>
